<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城</title>
    <link rel="stylesheet" href="./华为.css">
    <link rel="stylesheet" href="./2.css">
   <!--  <link rel="stylesheet" href="./3.css">  -->
    <link rel="stylesheet" href="./4index.css"> 
    <link rel="stylesheet" href="./3.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"  />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./font/iconfont.ttf">
    <link rel="stylesheet" href="./font1/iconfont.css">
    <link rel="stylesheet" href="./font1/iconfont.ttf">
    <link rel="stylesheet" href="./footer.css">
    <link rel="stylesheet" href="./font_cw2ybcrwbug/iconfont.css">
    <link rel="stylesheet" href="./font_cw2ybcrwbug/iconfont.ttf">
    <link rel="stylesheet" href="./font_p5mluaoebnq/iconfont.css">
    <link rel="stylesheet" href="./font_p5mluaoebnq/iconfont.ttf">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="box">
        <!-- 版心 -->
        <div class="cent">
        <!-- 最上面的部分 -->
        <div class="top">
            <h1>华为手环  7</h1>  
              <img src="./img/switch.png">
              <p>晒单抽智能水杯</p>
              <span>立即购买</span>
        </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <div class="cent">  
                  <ul  class="ull">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">华为官网</a></li>
                    <li><a href="#">花粉俱乐部</a></li>
                    <li><a href="#">V码(优购码)</a></li>
                    <li><a href="#">企业购</a></li>
                    <li><a href="#">SelectRegion</a></li>
                 
                    <li><a href="#">更多精彩</a></li>
                    <li><a href="login.html">请登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">客服</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">手机版</a></li>
                    <li><a href="#" class="iconfont icon-gouwuche">购物车</a></li>                      
                 </ul>
        </div>
        </div>
        <!-- 搜索部分 -->
        <div class="ss">
           <h2>VMALL</h2>
            <span>华为商城</span> 
            <ul>
                <li><a href="#">华为专区</a></li>
                <li><a href="#">鸿蒙智联</a></li>
                <li><a href="#">莫塞尔</a></li>
                <li><a href="#">华为智选</a></li>
                <li><a href="#">HarmonyOS</a></li>
                <li><a href="#">特惠企彩</a></li>
                <li><a href="#">教育购</a></li>
              
            </ul>
            
        </div>
        <!--轮播图  -->
        <div class="solideshows">
            <div class="slideshow">
                <img src="./img/car.webp" alt="">
            </div>
            <div class="slideshow">
                <img src="./img/华为matepadse.webp" alt="">
            </div>
            <div class="slideshow">
                <img src="./img/华为智选.webp" alt="">
            </div>
            <div class="slideshow">
                <img src="./img/华为超级新品日.webp" alt="">
            </div>
            <div class="slideshow">
                <img src="./img/家电.webp" alt="">
            </div>
            <div class="slideshow">
                <img src="./img/莫塞尔超品日.webp" alt="">
            </div>
            <div class="slideshow">
                <img src="./img/鸿蒙智联.webp" alt="">
            </div>
            <div class="arrows">
               <div class="la">&lt;</div>
               <div class="ra">&gt;</div>    
            </div>
        <ul class="dots">
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
        </div>
        <!--二级菜单  -->
        <div class="littlemenu">
             <div class="cent">
                 <ul>
                     <li>
                         <a href="#" class="ov">智能屏 
                             <div class="arrows1">
                            <div class="raa">&gt;</div>
                            </div>
                        </a>
                    </li>
                     <li>
                         <a href="#" class="ov1">电脑
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                        
                    </li>
                     <li>
                         <a href="#" class="ov2">平板
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                     <li>
                         <a href="#" class="ov3">门锁路由
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                     <li>
                         <a href="#" class="ov4">配件
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                     <li>
                         <a href="#" class="ov5">生态产品
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                     <li>
                         <a href="#" class="ov6">家用电器
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                     <li>
                         <a href="#" class="ov7">美食酒饮
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                     <li>
                         <a href="#" class="ov8">增值服务/企业商用
                            <div class="arrows1">
                                <div class="raa">&gt;</div>
                            </div>
                         </a>
                    </li>
                 </ul> 
                <div class="form">
                    <ul>
                    <li><img src="./img/mate系列.jpg"><span>华为mate系列</span></li>
                    <li><img src="./img/nove系列.jpg"><span>华为nove系列</span></li>
                    <li><img src="./img/p系列.jpg"><span>华为P系列</span></li>
                    <li><img src="./img/畅想系列.jpg"><span>华为畅想系列</span></li>
                    
                </ul>
                </div>
                <div class="form2">
                    <ul>
                    <li><img src="./img/matebook D.jpg"><span>Matebook D系列</span></li>
                    <li><img src="./img/matebook E.jpg"><span>Matebook E系列</span></li>
                    <li><img src="./img/X.jpg"><span>Matebook X系列</span></li>
                    <li><img src="./img/Y.jpg"><span>Matebook系列</span></li>
                    
                </ul>
                </div>
                <div class="form3">
                    <ul>
                    <li><img src="./img/平板1.jpg"><span>MatePad系列</span></li>
                    <li><img src="./img/平板2.jpg"><span>MatePad SE系列</span></li>
                     
                    
                </ul>
                </div>
                <div class="form4">
                    <ul>
                    <li><img src="./img/门锁.jpg"><span>门锁系列</span></li>
                    <li><img src="./img/路由.jpg"><span>路由系列</span></li>
                     
                </ul>
                </div>
                <div class="form5">
                    <ul>
                    <li><img src="./img/充电器.jpg"><span>充电器系列</span></li>
                    <li><img src="./img/保护壳.jpg"><span>保护壳系列</span></li>
                    
                    
                </ul>
                </div>
                <div class="form6">
                    <ul>
                    <li><img src="./img/生态产品.jpg"><span>生态产品系列</span></li>
                    
                    
                </ul>
                </div>
                <div class="form7">
                    <ul>
                    <li><img src="./img/家用电器.jpg"><span>家用电器系列</span></li>
                    <li><img src="./img/家用电器1.jpg"><span>家用电器系列</span></li>
                   
                    
                </ul>
                </div>
                <div class="form8">
                    <ul>
                    <li><img src="./img/美食酒饮.jpg"><span>美食酒饮系列</span></li>
                    
                </ul>
                </div>
                <div class="form9">
                    <ul>
                    <li><img src="./img/matebook D.jpg"><span>Matebook D系列</span></li>
                    <li><img src="./img/matebook E.jpg"><span>Matebook E系列</span></li>
                    <li><img src="./img/X.jpg"><span>Matebook X系列</span></li>
                    <li><img src="./img/Y.jpg"><span>Matebook系列</span></li>
                    
                </ul>
                </div>
                <div class="form10">
                    <ul>
                    <li><img src="./img/matebook D.jpg"><span>Matebook D系列</span></li>
                    <li><img src="./img/matebook E.jpg"><span>Matebook E系列</span></li>
                    <li><img src="./img/X.jpg"><span>Matebook X系列</span></li>
                    <li><img src="./img/Y.jpg"><span>Matebook系列</span></li>
                    
                </ul>
                </div>
               
                
            </div>
              
        </div> 
        


        <!-- 第二部分 -->


        <div class="tb">
            <ul>
                <li><i class="iconfont icon-aixin"></i><p>我的收藏</p></li>
                <li><i class="iconfont icon-huiyuan"></i><p>会员专区</p></li>
                <li><i class="iconfont icon-shangquan"></i><p>智能家居</p></li>
                <li><i class="iconfont icon-remen"></i><p>热门</p></li>
                <li><i class="iconfont icon-shouji"></i><p>以旧换新</p></li>
                <li><i class="iconfont icon-bangzhu"></i><p>帮助<p> </li>
            </ul>
            </div>
         <div class="pic1">
         <img src="./images/1.jpeg" alt="" />
         <img src="./images/2.jpeg" alt="" />
         <img src="./images/3.jpeg" alt="" />
         <img src="./images/4.jpeg" alt="" />
         </div>
         <div class="miaos">
             <p>秒杀</p>
             <span id="ky">限时秒杀></span> 
         </div>
             
         <div class="daopic">
         <div class="dao">
             <img src="./images/clock.png" alt="" />
             <h2>00:00场</h2> 
         <p><strong>距离结束还有</strong></p>
         <span class="span">
         <span class="h">7</span>
         <span class="m">7</span>
         <span class="s">7</span>
         </span>
         </div>
         
         <div class="pic2">
             <div class="picbox"> <img src="./images/11.png" alt=""/>
             <span class="ms">超级秒杀</span>
            
             <br>
             <span class="bt"><strong>野小兽智能动感单车</strong></span> <br>
             <p>NFC—碰联,人体工学设计有效护..</p>
             <span class="jg">￥949</span>&nbsp&nbsp&nbsp<span class="hx">1100</span>
             </div>
             <div class="picbox"><img src="./images/22.png" alt="" />
                 <span class="ms">超级秒杀</span>
                 <br> 
                 <span class="bt"><strong>OGAADWA智能按摩椅</strong></span> 
               <br > <p>3D劲感机芯 </p>
                 <span class="jg">￥1549</span>&nbsp&nbsp&nbsp<span class="hx">2920</span>
                 
             </div>
             <div class="picbox" id="pec"><img src="./images/33.png" alt=""/>
                 <span class="bt1"><strong>法国玛格塔红利2007</strong></span> 
                 <p id="pecp">珍藏红酒，香醇美味</p>
                 <span class="jg">￥349</span>&nbsp&nbsp&nbsp<span class="hx">820</span>
             </div>
             <div class="picbox" id="pec"><img src="./images/44.png" alt="" /><span class="bt1"><strong>华为智能空气炸锅</strong></span> 
                 <p id="pecp">秒杀价直降600元..</p>
                 <span class="jg">￥599</span>&nbsp&nbsp&nbsp<span class="hx">1200</span></div>
         </div>
         </div>
           <!--  第三部分 -->

           <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images2/11.png" alt="" ></div>
                <div class="swiper-slide"><img src="./images2/12.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images2/13.png" alt=""></div>
               
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
           <!--  <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
             -->
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <div id="biao">
            <ul>
            <li class="table"><a href="#">手机</a></li>
            <li class="table"><a href="#">智慧屏</a></li>
            <li class="table"><a href="#">耳机音箱眼镜</a></li>
            <li class="table"><a href="#">企业购专区</a></li>
        </ul>
        </div>
        
        <div class="phones1">
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/1.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/2.png" alt="">
                </div>
                <h4 class="h4">HUAWEI P50 E</h4>
                <p>￥4488</p>
                <p class="p1">赠送积分</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/3.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
                <p class="p1">赠送积分</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/4.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
                <p class="p1">赠送积分</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/5.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
                <p class="p1">赠送积分</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/6.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
                <p class="p1">赠送积分</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/7.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
                <p class="p1">赠送积分</p>
            </div>
            <div class="phone1">
                <div class="tu">
                    <img src="./images2/8.png" alt="">
                </div>
                <h4 class="h4">HUAWEI Mate Xs 2</h4>
                <p>￥9999</p>
                <p class="p1">赠送积分</p>
            </div>
        </div>

        <!-- 第四部分 -->
        <div class="text">
            <ul>
                <li><a href="">电脑</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">精品平板</a></li>
                <li><a href="">台式机</a></li>
                <li><a href="">显示器</a></li>
                <li><a href="">电脑配件</a></li>
            </ul>
        </div>
        <div class="computer">
           <div class="com">
                <div class="pics">
                <img src="./images3/1.webp" alt="">
                <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                <span class="s2">新品立省400元 | 3期免息</span>
                <h2>￥5299</h2>
                <span class="p1">限时特价</span>
                <span class="p2">分期免息</span>
                <span class="p3">赠送积分</span>
                </div>
           </div>
           <div class="com">
               <div class="pics">
               <img src="./images3/2.webp" alt="">
               <span class="s1">新品上市</span><h4>Matebook D 16</h4>
               <span class="s2">新品立省300元 | 12代酷睿</span>
               <h2>￥5799</h2>
               <span class="p1">限时特价</span>
               <span class="p2">分期免息</span>
               <span class="p3">赠送积分</span>
               </div>
           </div>
           <div class="com">
               <div class="pics">
                 <img src="./images3/3.webp" alt="">
                 <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                <span class="s2">新品立省300元 | 享3期免息</span>
                <h2>￥4999</h2>
                <span class="p1">限时特价</span>
                <span class="p2">分期免息</span>
                <span class="p3">赠送积分</span>
               </div>
           </div>
           <div class="com">
               <div class="pics">
                 <img src="./images3/4.webp" alt="">
                 <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                <span class="s2">立省1200元 | 12期免息</span>
                <h2>￥9299</h2>
                <span class="p1">限时特价</span>
                <span class="p2">分期免息</span>
                <span class="p3">赠送积分</span>
               </div>
           </div>
           <div class="com">
               <div class="pics">
                 <img src="./images3/1.webp" alt="">
                 <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                 <span class="s2">新品立省400元 | 3期免息</span>
                 <h2>￥6299</h2>
                 <span class="p1">限时特价</span>
                 <span class="p2">分期免息</span>
                 <span class="p3">赠送积分</span>
               </div>
           </div>
           <div class="com">
               <div class="pics">
                 <img src="./images3/2.webp" alt="">
                 <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                 <span class="s2">新品立省400元 | 3期免息</span>
                 <h2>￥5199</h2>
                 <span class="p1">限时特价</span>
                 <span class="p2">分期免息</span>
                 <span class="p3">赠送积分</span>
               </div>
           </div>
           <div class="com">
               <div class="pics">
                 <img src="./images3/3.webp" alt="">
                 <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                 <span class="s2">新品立省400元 | 3期免息</span>
                 <h2>￥2269</h2>
                 <span class="p1">限时特价</span>
                 <span class="p2">分期免息</span>
                 <span class="p3">赠送积分</span>
               </div>
           </div>
           <div class="com">
               <div class="pics">
                 <img src="./images3/4.webp" alt="">
                 <span class="s1">新品上市</span><h4>Matebook D 16</h4>
                 <span class="s2">新品立省400元 | 3期免息</span>
                 <h2>￥5299</h2>
                 <span class="p1">限时特价</span>
                 <span class="p2">分期免息</span>
                 <span class="p3">赠送积分</span>
               </div>
           </div>
        </div>
        <!-- 页脚部分 -->
        <div class="footer">
            <div class="topfooter">
              <ul>
                <li><a href="" class="iconfont icon-qianbao">百强企业 品质保证</a></li>
                <li><a href="" class="iconfont icon-rili">7天退货 15天换货</a></li>
                <li><a href="" class="iconfont icon-express-package">48元起免运费</a></li>
                <li><a href="" class="iconfont icon-anquan">2000家服务点 全国联保</a></li>
              </ul>
            
            </div>
            <hr />
          <div class="bigfooter">
            <div class="btfooter">
                <h4>购物指南</h4>
                <li><a href="">免息分期</a></li>
                <li><a href="">以旧换新</a></li>
                <li><a href="">众测活动</a></li>
                <li><a href="">企业购</a></li>
                <li><a href="">O2O采购</a></li>
            </div>
            <div class="btfooter">
                <h4>售后服务</h4>
                <li><a href="">门店维修</a></li>
                <li><a href="">保修政策</a></li>
                <li><a href="">防伪查询</a></li>
                <li><a href="">退换货政策</a></li>
                <li><a href="">手机寄修服务</a></li>
                <li><a href="">维修备件价格查询</a></li>
            </div>
            <div class="btfooter">
                <h4>维修与技术支持</h4>
                <li><a href="">服务店</a></li>
                <li><a href="">预约维修</a></li>
                <li><a href="">手机寄修</a></li>
                <li><a href="">备件价格查询</a></li>
                <li><a href="">上门服务</a></li>
            </div>
            <div class="btfooter">
                <h4>特色服务</h4>
                <li><a href="">防伪查询</a></li>
                <li><a href="">不够保障</a></li>
                <li><a href="">以旧换新</a></li>
                <li><a href="">礼品包装</a></li>
                
            </div>
            <div class="btfooter">
                <h4>关于我们</h4>
                <li><a href="">公司介绍</a></li>
                <li><a href="">华为零售店</a></li>
                <li><a href="">商家中心</a></li>
                <li><a href="">意见反馈</a></li>
    
            </div>
            <div class="btfooter">
                <h4>友情链接</h4>
                <li><a href="">华为集团</a></li>
                <li><a href="">华为CBG官网</a></li>
                <li><a href="">花粉俱乐部</a></li>
                <li><a href="">华为云</a></li>
                <li><a href="">华为应用市场</a></li>
            </div>
            <div class="btfooter">
                <h4>950805</h4>
                <span>7×24小时客服热线(仅收市话费)</span>
                <li class="bt"><a href="" class="iconfont icon-kefudianhua">在线客服</a></li>
            </div>
          </div>
          <hr style="height:1px;border:none;border-top:2px solid #f1f3f5;" />
        </div>
   
             
             
         
         
    </div>
    <script>
       /*  轮播图部分 */
    let slideshow=document.querySelector(".slideshows")
    //图片盒子
    let slideshows=document.querySelectorAll(".slideshow") 
    //左右
    let la=document.querySelector('.la')
    let ra=document.querySelector(".ra")
    //获取点
    let dots=document.querySelectorAll(".dot")
    //记录页码
    let page=0
    let timer=null
    dots.forEach((dot,index)=>{
         
        dot.onclick=function(){
            page=index
            for(let i=0;i<slideshows.length;i++){
                slideshows[i].style.opacity=0
            }
            slideshows[page].style.opacity=1
            for(let j=0;j<dots.length;j++){
                dots[j].style.backgroundColor="grey"
            }
            dots[page].style.backgroundColor="white"
        }
    })
    //左边箭头
    la.onclick=function(){
        clearInterval(timer)
        if(page==0){
            page=slideshows.length-1
            for(let i=0;i<slideshows.length;i++){
                slideshows[i].style.opacity=0
            }
            slideshows[page].style.opacity=1
            timer2()
        }
        else{
            page--
            for(let i=0;i<slideshows.length;i++){
                slideshows[i].style.opacity=0
            }
            slideshows[page].style.opacity=1
            timer2()
        }
        for(let j=0;j<dots.length;j++){
            dots[j].style.backgroundColor="grey"
        }
        dots[page].style.backgroundColor="white"
    }
    //右边箭头
    ra.onclick=function(){
        clearInterval(timer)
        if(page==slideshows.length-1){
            page=0
            for(let i=0;i<slideshows.length;i++){
                slideshows[i].style.opacity=0
            }
            slideshows[page].style.opacity=1
            timer2()
        }
        else{
            page++
            for(let j=0;j<slideshows.length;j++){
                slideshows[j].style.opacity=0
            }
            slideshows[page].style.opacity=1
            timer2()
        }
        for(let j=0;j<dots.length;j++){
            dots[j].style.backgroundColor="grey"
        }
        dots[page].style.backgroundColor="white"
    }
    timer2()
    function timer2(){
        timer=setInterval(() => {
            if(page==slideshows.length-1){
                page=0
                for(let i=0;i<slideshows.length;i++){
                    slideshows[i].style.opacity=0
                }
          slideshows[page].style.opacity=1
                
            }
            
            else{
                page++
                for(let i=0;i<slideshows.length;i++){
                    slideshows[i].style.opacity=0
                }
                slideshows[page].style.opacity=1
            }
            for(let j=0;j<dots.length;j++){
                dots[j].style.backgroundColor="grey"
            }
            dots[page].style.backgroundColor="white"
        }, 3000);
    }
    /* 二级菜单 */
     
      /*  let ul=document.querySelector(".littlemenu ul")
        let form=document.querySelector(".form")
         ul.onmouseover = function()
         {
             form.style.display="block"
        }
        ul.onmouseleave = function()
     {
        form.style.display=""
        }  */
        
        /* 二级菜单获取单个a */
        let a1=document.querySelector(".ov")
        let form=document.querySelector(".form")
         a1.onmouseover = function()
         {
             form.style.display="block"
        }
        a1.onmouseleave = function()
     {
        form.style.display=""
     }
     let a2=document.querySelector(".ov1")
        let form2=document.querySelector(".form2")
         a2.onmouseover = function()
         {
             form2.style.display="block"
        }
        a2.onmouseleave = function()
     {
        form2.style.display=""
     }
     let a3=document.querySelector(".ov2")
        let form3=document.querySelector(".form3")
         a3.onmouseover = function()
         {
             form3.style.display="block"
        }
        a3.onmouseleave = function()
     {
        form3.style.display=""
     }
     let a4=document.querySelector(".ov3")
        let form4=document.querySelector(".form4")
         a4.onmouseover = function()
         {
             form4.style.display="block"
        }
        a4.onmouseleave = function()
     {
        form4.style.display=""
     }
     let a5=document.querySelector(".ov4")
        let form5=document.querySelector(".form5")
         a5.onmouseover = function()
         {
             form5.style.display="block"
        }
        a5.onmouseleave = function()
     {
        form5.style.display=""
     }
     let a6=document.querySelector(".ov5")
        let form6=document.querySelector(".form6")
         a6.onmouseover = function()
         {
             form6.style.display="block"
        }
        a6.onmouseleave = function()
     {
        form6.style.display=""
     }
     let a7=document.querySelector(".ov6")
        let form7=document.querySelector(".form7")
         a7.onmouseover = function()
         {
             form7.style.display="block"
        }
        a7.onmouseleave = function()
     {
        form7.style.display=""
     }
     let a8=document.querySelector(".ov7")
        let form8=document.querySelector(".form8")
         a8.onmouseover = function()
         {
             form8.style.display="block"
        }
        a8.onmouseleave = function()
     {
        form8.style.display=""
     }
     let a9=document.querySelector(".ov8")
        let form9=document.querySelector(".form9")
         a9.onmouseover = function()
         {
             form9.style.display="block"
        }
        a9.onmouseleave = function()
     {
        form9.style.display=""
     }
     /* let a10=document.querySelector(".ov9")
        let form10=document.querySelector(".form10")
         a10.onmouseover = function()
         {
             form10.style.display="block"
        }
        a10.onmouseleave = function()
     {
        form10.style.display=""
     } */




     /* 倒计时部分 */
     var timer1=setInterval(() => {
    var nowTime= new Date()*1
    var inputTime =new Date('2022-6-7 24:00:00')*1
    //求相差
    var dTime = inputTime-nowTime//得到的是毫秒
    //清除定时器
    if(dTime<0)
    {
        clearInterval(timer)
    }
    //小时
    var hour= parseInt((dTime/1000/60/60)%24)//防止出现30 40.。多小时
    //三元运算符
    hour =hour<10?'0'+hour:hour
    //分钟
    var mins= parseInt((dTime/1000/60)%60)//防止出现70多 80。。多分钟
    //分数小于10前面加个0
    mins=mins<10?'0'+mins:mins
    //秒数
    var sec= parseInt((dTime/1000)%60)
    sec=sec<10?'0'+sec:sec
    //获取元素
    var hh=document.querySelector(".h")
    var mm=document.querySelector(".m")
    var ss=document.querySelector(".s")
    //改变元素内容
    hh.innerHTML=hour
    mm.innerHTML=mins
    ss.innerHTML=sec
},1000)

/* 第二个倒计时 */
/* var timer1 = setInterval(() => {
        var nowTime1 = new Date() * 1
        var inputTime1 = new Date("2022-5-13 12:00:00") * 1
        var dTime1 = inputTime1 - nowTime1
        if (dTime1< 0) {
          clearInterval(timer1)
        }
        var hour1 = parseInt((dTime1 / 1000 / 60 / 60) % 24)
        hour1 = hour1 < 10 ? "0" + hour1 : hour1
        var minute1 = parseInt((dTime1 / 1000 / 60) % 60)
        minute1 = minute1 < 10 ? "0" + minute1 : minute1
        var second1 = parseInt((dTime1 / 1000) % 60)
        second1 = second1 < 10 ? "0" + second1 : second1
        var ss1 = document.querySelector(".s1")
        var ff1 = document.querySelector(".f1")
        var mm1 = document.querySelector(".m1")
        ss1.innerHTML = hour1
        ff1.innerHTML = minute1
        mm1.innerHTML = second1
      }, 1000)
 */
   /*  最后一部分轮播图 */


      var mySwiper = new Swiper ('.swiper', {
     
     loop: true, // 循环模式选项
     autoplay: true,
     // 如果需要分页器
     pagination: {
     el: '.swiper-pagination',
     clickable: true
                 },
  
     // 如果需要前进后退按钮
     /*  navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
                  }, */
  
       // 如果需要滚动条
     /*  scrollbar: {
        el: '.swiper-scrollbar',
                 }, */
 })        
    </script>
  
 
     
</body>
</html>